<template>
  <div class="home-container">
    <div class="home-box">
      <div style="text-align: center">
        <h1 class="welcome-txt text-xl md:text-2xl font-medium">👋 {{welcomeTxt[hourIndex]}}</h1>
        <p class="text-muted-foreground text-base">巧思胜苦干，从这里开始</p>
      </div>
      <div style="margin-top: 50px">
        <div class="flex flex-row gap-2 text-xs text-zinc-500 font-medium items-center py-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plane-takeoff size-4">
            <path d="M2 22h20"></path>
            <path d="M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z"></path>
          </svg>
          <span>快速开始</span>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="col-content col1">
                <el-icon size="40" style="margin-bottom: 16px"><Reading /></el-icon>
                <div class="text-left space-y-1.5">
                  <h2 class="text-base font-bold tracking-tight">文献阅读</h2>
                  <p class="text-xs">快速阅读单篇论文、书籍和长文档</p>
                </div>
                <el-button class="col-button single" @click="handleSingle">
                  <el-icon style="margin-right: 10px"><Upload /></el-icon>
                  上传文件
                </el-button>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="col-content col2">
                <el-icon size="40" style="margin-bottom: 16px"><Files /></el-icon>
                <div class="text-left space-y-1.5">
                  <h2 class="text-base font-bold tracking-tight">批量阅读</h2>
                  <p class="text-xs">从几十篇文献中批量获取核心数据、方法、结论等信息</p>
                </div>
                <el-button class="col-button multi" @click="handleMulti">
                  <el-icon style="margin-right: 10px"><MessageBox /></el-icon>
                  批量阅读
                </el-button>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="col-content col1">
                <el-icon size="40" style="margin-bottom: 16px"><Document /></el-icon>
                <div class="text-left space-y-1.5">
                  <h2 class="text-base font-bold tracking-tight">文献翻译</h2>
                  <p class="text-xs">结构化单篇论文、书籍和长文档</p>
                </div>
                <el-button class="col-button single" @click="handleTranslation">
                  <el-icon style="margin-right: 10px"><ScaleToOriginal /></el-icon>
                  上传文件
                </el-button>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="col-content">
                <div class="developing-bg"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="margin-top: 50px">
        <div class="flex flex-row gap-2 text-xs text-zinc-500 font-medium items-center py-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock size-4">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <span>最近添加</span>
        </div>
        <RecordTable :homePage="true" />
      </div>
    </div>
    <el-dialog
      v-model="singleVisible"
      width="768"
      :destroy-on-close="true"
      align-center
    >
      <SingleUpload :dialogPage="true" />
    </el-dialog>
    <el-dialog
      v-model="multipleVisible"
      width="768"
      :destroy-on-close="true"
      align-center
    >
      <MultipleUpload :dialogPage="true" />
    </el-dialog>
    <el-dialog
      v-model="translationVisible"
      width="768"
      :destroy-on-close="true"
      align-center
    >
      <TranslationUpload :dialogPage="true" />
    </el-dialog>
  </div>
    
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import SingleUpload from '../components/SingleUpload.vue';
import MultipleUpload from '../components/MultipleUpload.vue';
import TranslationUpload from '../components/TranslationUpload.vue';
import RecordTable from '../components/RecordTable.vue';

const router = useRouter()

const hourIndex = ref(0);
const welcomeTxt = [
  '早上好',
  '上午好',
  '中午好',
  '下午好',
  '晚上好',
  '夜深了，早点休息吧🛌'
];

const singleVisible = ref(false);
const multipleVisible = ref(false);
const translationVisible = ref(false);

onMounted(() => {
  updateCurrentHour();
})

const updateCurrentHour = () => {
  const now = new Date();
  const currentHour = now.getHours(); // 获取当前小时（0-23）
  if (currentHour >= 5 && currentHour < 9) {
    hourIndex.value = 0;
  } else if (currentHour >= 9 && currentHour < 12) {
    hourIndex.value = 1;
  } else if (currentHour >= 12 && currentHour < 14) {
    hourIndex.value = 2;
  } else if (currentHour >= 14 && currentHour < 18) {
    hourIndex.value = 3;
  } else if (currentHour >= 18 && currentHour < 23) {
    hourIndex.value = 4;
  } else if (currentHour == 23 || currentHour < 5) {
    hourIndex.value = 5;
  }
}

const handleSingle = () => {
  singleVisible.value = true;
}

const handleMulti = () => {
  multipleVisible.value = true;
}

const handleTranslation = () => {
  translationVisible.value = true;
}
</script>

<style scoped>
.home-container {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  /* height: 100%; */
  padding: 32px 0;
}
.home-box {
  width: 100%;
  max-width: 1024px;
  /* height: 100%; */
}
.welcome-txt {
  color: var(--txt-color);
}
.text-muted-foreground {
  margin-top: 8px;
  color: var(--muted-foreground);
}
.col-content {
  height: 285px;
  padding: 52px 28px 0 28px;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  background: var(--menu-background);
  border: 1px solid var(--item-border);
  color: var(--txt-color);
}
.col-content ::v-deep .el-icon {
  color: var(--primary);
}
/* .col1 {
  background: url('@/assets/images/pg1.jpg') no-repeat 0 0 / cover;
}
.col2 {
  background: url('@/assets/images/pg2.jpg') no-repeat 0 0 / cover;
} */
.developing-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
  background: url('@/assets/images/developing.png') no-repeat 0 0 / cover;
  /* filter: blur(5px); */
}
.developing-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}
.col-button {
  width: calc(100% - 56px);
  height: 36px;
  border-radius: 50px;
  /* margin-top: 30px; */
  background: var(--button-bg-color);
  border: 1px solid var(--button-bg-color);
  position: absolute;
  bottom: 52px;
  color: var(--txt-color);
}
.col-button:hover {
  background: var(--button-hover-bg-color);
  border: 1px solid var(--button-hover-bg-color);
}
::v-deep .el-overlay {
  background: var(--dialog-bg);
}
::v-deep .el-dialog {
  background: var(--background);
  border: 1px solid var(--border);
}
/* .single {
  color: var(--primary);
  border: 1px solid var(--primary);
}
.multi {
  color: rgb(240, 177, 0);
  border: 1px solid rgb(240, 177, 0);
} */
/* .col-content:hover .single, .single:hover {
  background: var(--primary);
  color: #fff;
}
.col-content:hover .multi, .multi:hover {
  background: rgb(240, 177, 0);
  color: #fff;
} */
</style>